<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h2>用户注册</h2>
    <form id="register-form">
        <label for="username">用户名:</label>
        <input type="text" id="username" required><br><br>

        <label for="password">密码:</label>
        <input type="password" id="password" required><br><br>

        <label>角色:</label>
        <select id="role">
            <option value="user">普通用户</option>
            <option value="admin">管理员</option>
        </select><br><br>

        <button type="submit">注册</button>
    </form>

    <script>
        document.getElementById('register-form').addEventListener('submit', function(event) {
            event.preventDefault();

            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const role = document.getElementById('role').value;

            fetch('http://localhost:3002/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ username, password, role }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.message === '注册成功') {
                    alert('注册成功！');
                    window.location.href = 'login.html';  // 注册后跳转到登录页面
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('错误:', error);
            });
        });
    </script>
    <footer>
        <p>项目由 张成飞制作 | 版权所有</p>
    </footer>
</body>
</html>

